<template>
  <div class="scatter">

    <div class="continer">
      <div class="top">
        <p ref="ptitle">{{this.title}}</p>
      </div>
      <div class="bottom">
        <div class="left">
          <div class="box">
            <div id="myChart" ref="myChart"></div>
          </div>

        </div>
        <div class="right">
          <li><span>功率</span><input></li>
          <li><span>流量</span><input></li>
          <li><span>进气损失</span><input></li>
          <li><span>排气损失</span><input></li>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    props:["listScatterItem","Scattertitle"],
    data () {
      return {
        myChart: '',
        option: '',
        title: ''
      }
    },
    watch:{
      listScatterItem(){
        this.drawLine();
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
        this.title = this.Scattertitle
        // 基于准备好的dom，初始化echarts实例
        // this.myChart = this.$echarts.init(document.getElementById('myChart'))
        this.myChart = this.$echarts.init(this.$refs.myChart)
        this.option = this.listScatterItem;
        // 绘制图表
        this.myChart.setOption(this.option);
        window.addEventListener("resize", function () {
          this.myChart.resize();
        });
      }
    }
  }
</script>

<style scoped>
  /*.scatter {*/
  /*  float: left;*/
  /*}*/
  .continer {
    width: 36%;
    /*height:30%;*/
    background: forestgreen;
    float: left;
    margin-left: 8%;
    margin-bottom: 2%;
  }
  .top p{
    width: 40%;
    height: 50px;
    background: grey;
    margin-left: 30%;
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    font-size: 26px;
  }
  .bottom {
    height: 360px;
    margin-top: 20px;
  }
  .left {
    float: left;
    width: 60%;
    background: forestgreen;
    height: 360px;
  }
  .left .box {
    background: #eee;
    width: 340px;
    margin-left: 70px;
    margin-top: 20px;
    height: 300px;
  }
#myChart {
  width: 340px;
  height: 300px;
}
  .right {
    float: left;
    width: 40%;
    height: 400px;
    background: forestgreen;
    padding-top: 20px;
  }
  .right li{
    list-style-type: none;
    height: 60px;
    width: 100%;
    margin-bottom: 20px;
  }
  .right li span {
    width: 140px;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
    font-weight: normal;
    display: inline-block;
  }
  .right li input{
    height: 40px;
    width: 120px;
    background: orange;
    outline:none;
    border:none;
  }
  .right li input:focus{
    border:none;
  }
</style>
